<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品结算页</title>
    <link rel="stylesheet" href="lib/reset.css">
    <link rel="stylesheet" href="lib/compute.css">
    <link rel="stylesheet" href="lib/download/font_2136775_qhlyqf2gm9/iconfont.css">
    <link rel="stylesheet" href="lib/bootstrap.min.css">
</head>

<body>
    <div class="header">
        <div class="header-content">
            <img src="img/logo.png" alt="">
        </div>
    </div>

    <div class="wrap">
        <div class="wrap-content">
            <div class="userInfo">
                <h3>结算支付</h3>
                <div class="userInfo-t">
                    <span>个人信息</span>
                    <span id="send">登录账户</span>
                </div>
                <div class="userInfo-c">
                    <input type="text" placeholder="请输入您的真实姓名" id="reallyname"><br>
                    <input type="text" placeholder="请输入您的用户名" id="username"><br>
                    <input type="password" placeholder="请输入您的密码" id="password"><br>
                    <input type="text" placeholder="请输入图形验证码" class="tuxing">
                    <img src="img/yanzheng.png" alt="" class="tuimg"><br>
                    <input type="checkbox" class="check">
                    <span>我已仔细阅读并同意COACH 安全与隐私政策</span>
                </div>

                <div class="userInfo-send">
                    <p>配送信息</p>
                    <input type="checkBox" class="send-check">
                    <span class="postPerson">我为订单收件人</span>
                    <button id="edit" class="btn btn-primary">编辑地址</button><br>
                    <input type="text" placeholder="请输入真实姓名" id="send-name"><br>
                    <input type="text" placeholder="请输入手机号" id="send-tell"><br>
                    <select name="" id="province"></select>
                    <select name="" id="city"></select>
                    <select name="" id="area"></select><br>
                    <input type="text" placeholder="请输入详细地址" id="detailsAddress">
                </div>

                <div class="userInfo-beizhu">
                    <input type="checkBox" class="beizhu-check">
                    <span class="beizhu-car">需要礼品卡</span><br>
                    <p>如需礼盒包装，请在订单备注处留言或联系客服</p>
                    <img src="img/lipin.png" alt="">
                    <p>订单备注</p>
                    <input type="text" placeholder="如果您有其他需要请在此留言" class="liuyan">
                </div>

                <div class="pay">
                    <span>支付方式</span>
                    <span>（您可在订单签收7天后，前往"用户中心"-"我的订单"开具电子发票）</span><br>
                    <div class="payType">
                        <img src="img/zhifubao.png" alt="">
                        <img src="img/weixinpay.png" alt="">
                        <img src="img/huabei.png" alt="">
                    </div>
                    <p id="paying">立即支付</p>
                </div>
            </div>
            <div class="shopDetails">
                <div class="details-t">
                    <span class="iconfont icon-kefu"></span>
                    <span>在线客服</span>
                </div>
                <h3>订单详情</h3>
                <div class="center-1">
                    <span>商品总额</span>
                    <span>￥&nbsp;</span>
                    <span id="totalPrice"></span>
                </div>
                <div class="center-2">
                    <span>促销优惠</span>
                    <span>-￥&nbsp;</span>
                    <span>0.00</span>
                </div>
                <div class="center-3">
                    <span>运费</span>
                    <span>￥&nbsp;</span>
                    <span>0.00</span>
                </div>
                <div class="center-4">
                    <span>总计</span>
                    <span id="num"></span>
                    <span>￥</span>
                    <span id="totalprice"></span>
                </div>
                <div class="center-5">
                    <img src="" alt="" id="details-img">
                    <div class="center-right">
                        <p id="details-title"></p>
                        <p class="color">颜色：B4/TE</p>
                        <span class="n">数量：</span>
                        <span id="details-num"></span>
                        <span class="p">￥</span>
                        <span id="price"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="footer-content">
            <div class="footer-top">
                <ul>
                    <li>网站与精品店</li>
                    <li>查找精品店</li>
                    <li>网站导航</li>
                    <li>使用条款</li>
                    <li>安全与隐私</li>
                </ul>
                <ul>
                    <li>客户服务</li>
                    <li>关于订单</li>
                    <li>关于产品</li>
                    <li>VIP会籍招募条件</li>
                    <li>联系我门</li>
                </ul>
                <ul>
                    <li>关于COACH</li>
                    <li>公司信息</li>
                    <li>TAPESTRY</li>
                    <li>职业招聘</li>
                </ul>
                <ul>
                    <li>关注COACH</li>
                    <li>官方微博</li>
                    <li>官方微信</li>
                    <img src="img/erweima.png" alt="">
                    <li>关注COACH官方微信</li>
                    <li>获取电子会员卡及微信</li>
                    <li>专属礼遇</li>
                </ul>
                <ul>
                    <li>获取COACH新讯</li>
                    <li>
                        <input type="text" placeholder="电子邮箱*">
                    </li>
                    <li>
                        <input type="text" placeholder="确认电子邮箱*">
                    </li>
                    <li>您已经注册并同意接受COACH邮件，您可以随时取消订阅。</li>
                    <li>阅读<u>安全与隐私政策</u>或<u>联系我们</u>获取更多信息。</li>
                    <li>
                        加入我们
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; THE ESTATE OF RICHARD BERNSTEIN</p>
            <p>&copy; 2020 COACH IP HOLDINGS LLC. COACH, COACH SIGNATURE C DESIGN, COACH & TAG DESIGN, COACH HORSE & CARRIAGE DESIGN ARE REGISTERED TRADEMARKS OF COACH IP HOLDINGS LLC.</p>
            <span>泸ICP备0906012号-1,</span>
            <img src="img/wron1.png" alt="">
            <span>上海工商</span><br>
            <img src="img/wron2.png" alt="">
            <span>泸公网备31010602000942</span>
        </div>
    </div>

    <div class="fix">
        <span class="iconfont icon-kefu"></span>
    </div>

    <div class="mask"></div>
    <div class="pop">
        <p>请填写个人信息</p>
        <button class="btn btn-primary" id="submit">确定</button>
    </div>
    <div class="repop">
        <p>修改个人信息</p>
        <input type="text" placeholder="请输入真实姓名" id="edit-name"><br>
        <input type="text" placeholder="请输入手机号" id="edit-tell"><br>
        <input type="text" placeholder="请输入详细地址" id="edit-detailsAddress"><br>
        <button class="btn btn-primary" id="resubmit">确定提交</button>
        <button class="btn btn-danger" id="recancel">取消</button>
    </div>


    <script src="lib/citys.js"></script>
    <script src="lib/common.js"></script>
    <script src="lib/jquery.min.js"></script>


    <script>
        String.prototype.parseUrl = function() {
            let arr = this.slice(this.indexOf("?") + 1).split("&");
            let result = {};
            arr.forEach(item => {
                let key = item.split("=")[0];
                let value = item.split("=")[1];
                result[key] = value;
            })
            return result;
        }

        //发送查看订单详情请求
        $.ajax({
            url: `${address}/shopDetails`,
            data: {
                id: location.href.parseUrl().id
            },
            success(data) {
                $("#totalPrice").html(data.totalprice);
                $("#totalprice").html(data.totalprice);
                $("#num").html(`(共${data.count}件)`);
                $("#details-num").html(data.count);
            }
        })

        //发送商品列表页的请求
        $.ajax({
            url: `${address}/details`,
            data: {
                id: location.href.parseUrl().id
            },
            success(data) {
                $("#details-title").html(data.title);
                $("#price").html(data.price);
                $("#details-img").attr("src", data.img);
            }
        })

        //发送用户信息请求
        $("#send").click(function() {
            let username = $("#username").val();
            let password = $("#password").val();
            let reallyname = $("#reallyname").val();
            //登录请求
            if (username && password && reallyname && $(".check")[0].checked) {
                $.ajax({
                    url: `${address}/user`,
                    method: "post",
                    data: {
                        username,
                        password,
                        name: reallyname
                    },
                    success(data) {
                        if (data === "错误") {
                            alert("用户名或密码错误")
                        } else {
                            alert("登录成功");
                            $(".pop").fadeIn();
                            $(".mask").fadeIn();
                        }
                    }
                })
            } else {
                alert("请重新登录");
            }
        })

        $("#submit").click(function() {
            $(".mask").fadeOut();
            $(".pop").fadeOut();
            //点击支付
            $("#paying").click(function() {
                let userName = $("#send-name").val();
                let shopId = location.href.parseUrl().id;
                let shopName = $("#details-title").html();
                let shopPrice = $("#totalprice").html();
                let tell = $("#send-tell").val();
                let addresss = $("#province").val() + $("#city").val() + $("#area").val();
                let detailsAddress = $("#detailsAddress").val();
                //添加用户订单信息
                if (userName && tell && detailsAddress && $(".send-check")[0].checked) {
                    $.ajax({
                        url: `${address}/getPerson`,
                        data: {
                            userName,
                            shopId,
                            shopName,
                            shopPrice,
                            tell,
                            addresss,
                            detailsAddress
                        },
                        success(data) {
                            location.href = `${address}/success.html?id=${location.href.parseUrl().id}`;
                        }
                    })
                } else {
                    alert("请重新填写");
                }
            })

        })

        $("#reallyname").focus();
        $("#send-name").focus();


        //省市区三级联动
        let province = $("#province");
        let city = $("#city");
        let area = $("#area");

        citys.forEach(item => {
            let option = $(`<option>${item.provinceName}</option>`);
            province.append(option)
        })

        citys[0].mallCityList.forEach(item => {
            let option = $(`<option>${item.cityName}</option>`);
            city.append(option)
        })

        citys[0].mallCityList[0].mallAreaList.forEach(item => {
            let option = $(`<option>${item.areaName}</option>`);
            area.append(option)
        })

        province.change(function() {
            updataCity.call(this);
            updataArea.call(city[0]);
        })
        city.change(function() {
            updataArea.call(this)
        })

        function updataCity() {
            city.html("")
                // 返回当前选中的选择项在其select标签中的下标
            cityList = citys[this.selectedIndex].mallCityList;
            cityList.forEach(item => {
                let option = $(`<option>${item.cityName}</option>`);
                city.append(option)
            })
        }

        function updataArea() {
            area.html("")
            let areaList = cityList[this.selectedIndex].mallAreaList;
            areaList.forEach(item => {
                let option = $(`<option>${item.areaName}</option>`);
                area.append(option)
            })
        }


        $("#edit").click(function() {
            $(".mask").fadeIn();
            $(".repop").fadeIn();
            $("#edit-name").focus();

        })
        $("#resubmit").click(function() {
            if ($("#edit-name").val() && $("#edit-tell").val() && $("#edit-detailsAddress").val()) {
                $.ajax({
                    url: `${address}/editPerson`,
                    data: {
                        shopId: location.href.parseUrl().id,
                        userName: $("#edit-name").val(),
                        tell: $("#edit-tell").val(),
                        detailsAddress: $("#edit-detailsAddress").val()
                    },
                    success(data) {
                        if (data === "success") {
                            history.go(0);
                        }
                    }
                })
            } else {
                alert("重新编辑")
            }
        })

        $("#recancel").click(function() {
            $(".mask").fadeOut();
            $(".repop").fadeOut();
        })


        let li1 = $(".nav li").eq(0);
        let li2 = $(".nav li").eq(1);
        let li3 = $(".nav li").eq(2);
        let li4 = $(".nav li").eq(3);
        let li5 = $(".nav li").eq(4);
        li1.mouseenter(function() {
            $("#box1").show();
            $("#box2").hide();
            $("#box3").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box1").mouseleave(function() {
            $("#box1").hide();
        })
        li2.mouseenter(function() {
            $("#box2").show();
            $("#box1").hide();
            $("#box3").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box2").mouseleave(function() {
            $("#box2").hide();
        })
        li3.mouseenter(function() {
            $("#box3").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box4").hide();
            $("#box5").hide();
        })
        $("#box3").mouseleave(function() {
            $("#box3").hide();
        })
        li4.mouseenter(function() {
            $("#box4").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box3").hide();
            $("#box5").hide();
        })
        $("#box4").mouseleave(function() {
            $("#box4").hide();
        })
        li5.mouseenter(function() {
            $("#box5").show();
            $("#box1").hide();
            $("#box2").hide();
            $("#box3").hide();
            $("#box4").hide();
        })
        $("#box5").mouseleave(function() {
            $("#box5").hide();
        })
    </script>
</body>

</html>